<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Node</title>
  <script>
    // 页面文档加载完毕执行js代码
    window.onload=function(){
      // 获取body节点
      var body=document.body;
      console.log(body,'获取body节点');
      // 查看节点类型 Document9 Element1 Text3 Comment8
      console.log(document.nodeType,'查看文档节点类型');
      console.log(body.nodeType,'查看元素节点类型');
      // 返回节点名称  返回纯大写节点名称nodeName
      console.log(body.nodeName,'返回纯大写节点名称');
      var div=document.getElementById('one');
      console.log(div.nodeName,'返回纯大写节点名称');
      // 获取子节点 childNodes保存的是NodeList列表
      console.log(body.childNodes,'获取子节点');
      var childs=body.childNodes;
      console.log(Array.isArray(childs),'不是数组对象');//false
      // ES5 将类数组对象转换成数组对象
      var result1=Array.prototype.slice.call(childs,0);
      console.log(result1,Array.isArray(result1),'将类数组对象转换成数组对象');
      // 将类数组对象转换成数组对象 ES6 from
      var result=Array.from(childs);
      console.log(result,Array.isArray(result),'将类数组对象转换成数组对象');
      // 获取兄弟节点的前一个节点
      console.log(childs[1].previousSibling,'获取兄弟结点的前一个节点');
      // 获取兄弟节点的后一个节点
      console.log(childs[1].nextSibling,'获取兄弟节点的后一个节点');
      // 获取nodelist列表的第一个孩子节点
      console.log(body.firstChild,'获取nodelist列表的第一个孩子节点');
      // 获取nodeliest列表的最后一个孩子节点
      console.log(body.lastChild,'获取nodeliest列表的最后一个孩子节点');
      // 指向表示整个文档的文档节点
      console.log(body.ownerDocument,'指向表示整个文档的文档节点');
      // 查看是否有孩子节点的方法
      console.log(body.hasChildNodes(),'查看是否有孩子节点的方法');
      // 获取元素孩子节点
      console.log(body.children,'获取元素孩子节点');
      // 过滤出所有元素孩子节点
      var result=Array.from(childs);
      var result2=result.filter(function(item){
        return item.nodeType == 1
      });
      console.log(result2,'过滤出元素节点');
    }
  </script>
</head>
<body>
  hello
  <div id="one" class="two">我是块级元素div</div>
  world
  <!-- 注释节点 -->
  <div class="three" id="four">我是第二个div</div>
</body>
</html>